<template>
    <div class="PatientManage">
        <div class="head">
            <h1 class="title">病患管理</h1>
        </div>
        <div class="container">
            <div>
                <el-button class="searchBTN" type="primary" size="middle" @click="isSearch = true" plain>搜索</el-button>
                <el-button class="resetBTN" type="primary" size="middle" @click="reset" plain>重置</el-button>

                <el-table :data="selectedInformation">
                    <el-table-column label="患者ID" prop="userId" width="140px">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.userId" v-if="scope.row.seen"> </el-input>
                            <span style="margin-left: 10px" v-else>{{ scope.row.userId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="患者姓名" prop="name" width="140px">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.name" v-if="scope.row.seen"> </el-input>
                            <span style="margin-left: 10px" v-else>{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="性别" prop="gender" width="140px">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.gender" v-if="scope.row.seen"> </el-input>
                            <span style="margin-left: 10px" v-else>{{ formatGender(scope.row.gender) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="年龄" prop="age" width="140px">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.age" v-if="scope.row.seen"> </el-input>
                            <span style="margin-left: 10px" v-else>{{ scope.row.age }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号码" prop="telephone" width="200px">
                        <template v-slot="scope">
                            <el-input v-model="scope.row.telephone" v-if="scope.row.seen"> </el-input>
                            <span style="margin-left: 10px" v-else>{{ scope.row.telephone }}</span>
                        </template>
                    </el-table-column>
    
                </el-table>

                <el-row>
                    <el-col :span="24">
                        <div style="padding-top: 20px;">
                            <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                            ></el-pagination>
                        </div>
                    </el-col>
                </el-row>

                <el-dialog title="搜索" :model-value="isSearch" :append-to-body="true">
                    <el-form-item label="患者编号">
                        <el-input v-model="patientId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="患者姓名">
                        <el-input v-model="patientName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="患者性别">
                        <el-input v-model="patientGender" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="患者手机号码">
                        <el-input v-model="patientTelephone" autocomplete="off"></el-input>
                    </el-form-item>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="search">确 定</el-button>
                        <el-button @click="isSearch = false">取 消</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            name: this.$store.state.userName,
            id: this.$store.state.id,
            patientInformation: [],
            selectedInformation: [],
            searchInformation: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            patientName: null,
            patientTelephone: null,
            patientGender: null,
            patientId: null,
            isSearch: false,
            findSearch: false,
        };
    },
    created() {
        this.getPatientInformation();
    },
    methods: {
        reset() {
            this.findSearch = false;
            this.selectPage();
        },
        search() {
            this.searchInformation = this.patientInformation.filter(patient => {
                return (!this.patientName || patient.name.includes(this.patientName)) &&
                       (!this.patientTelephone || patient.telephone.includes(this.patientTelephone)) &&
                       (!this.patientId || patient.userId == this.patientId) &&
                       (!this.patientGender || patient.gender == this.patientGender);
            });
            this.isSearch = false;
            this.findSearch = true;
            this.total = this.searchInformation.length;
            this.selectPage();
        },
        getPatientInformation() {
            axios.get('http://localhost:8085/api/doctor/patientManage', {
                params: { doctorId: this.id }
            })
            .then(res => {
                if (res.data.code === 1) {
                    this.patientInformation = res.data.data;
                    this.total = this.patientInformation.length;
                    this.selectPage();
                } else {
                    ElMessage.error(res.data.msg);
                }
            })
            .catch(() => {
                ElMessage.error('获取病患信息失败');
            });
        },
        selectPage() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = this.currentPage * this.pageSize;
            this.selectedInformation = this.findSearch ? this.searchInformation.slice(start, end) : this.patientInformation.slice(start, end);
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.selectPage();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.selectPage();
        },
        formatGender(gender) {
            return gender === 0 ? '女' : gender === 1 ? '男' : '未知';
        }
    }
};
</script>

<style scoped>
.home {
    text-align: center;
    margin-top: 10%;
}

.item img {
    max-width: 80%;
    height: auto;
    cursor: pointer;
}

.container {
    display: flex;
    margin-top: 2em;
}

.item {
    flex: 1;
    margin: 0 1em;
    text-align: center;
}

.searchBTN {
    position: relative;
    left: -370px;
    top: -6px;
}

.resetBTN {
    position: relative;
    left: -370px;
    top: -6px;
}
</style>
